<template>
  <div class="login_centainer">
    <div class="login_box">
      <el-row>
        <el-col :span="12">
          <img class="loginImg" src="../assets/login.png" alt />
        </el-col>
        <el-col :span="11">
          <!-- 主体标题 -->
          <div class="center">
            <p class="mainP">会员后台管理系统</p>
          </div>

          <!-- 用户名表单 -->
          <el-form
            class="login_form"
            ref="resetNameLoginForm"
            :rules="nameLoginFormRules"
            :model="nameLoginForm"
            label-width="0px"
            v-show="isTypeShow=='name'"
          >
            <el-form-item></el-form-item>
            <!-- 用户名 -->
            <el-form-item prop="name">
              <el-input v-model="nameLoginForm.name" placeholder="请输入用户名" class="loginInp"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input v-model="nameLoginForm.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item></el-form-item>
          </el-form>

          <!-- 手机表单 -->
          <el-form
            class="login_form"
            ref="resetPhoneLoginForm"
            :rules="phoneLoginFormRules"
            :model="phoneLoginForm"
            label-width="0px"
            v-show="isTypeShow=='phone'"
          >
            <el-form-item></el-form-item>
            <!-- 手机号 -->
            <el-form-item prop="phone">
              <el-input v-model="phoneLoginForm.phone" placeholder="请输入手机号" class="loginInp"></el-input>
            </el-form-item>

            <!-- 验证码 -->
            <el-form-item prop="code">
              <el-row type="flex" justify="space-between">
                <!-- 验证码输入框 -->
                <el-col :span="16">
                  <el-input v-model="phoneLoginForm.code" placeholder="请输入验证码" class="loginInp"></el-input>
                </el-col>
                <!-- 发送验证码按钮 -->
                <el-button
                  style="color:#777"
                  @click="sendPhoneCode"
                  :disabled="isSendPhone"
                >{{isSendPhone?phoneCodeTime+'s后重新发送':'发送验证码'}}</el-button>
              </el-row>
            </el-form-item>
            <el-form-item></el-form-item>
          </el-form>

          <!-- 邮箱表单 -->
          <el-form
            class="login_form"
            ref="resetEmailLoginForm"
            :rules="emailLoginFormRules"
            :model="emailLoginForm"
            label-width="0px"
            v-show="isTypeShow=='email'"
          >
            <el-form-item></el-form-item>

            <!-- 邮箱号 -->
            <el-form-item prop="email" v-show="isTypeShow=='email'">
              <el-input v-model="emailLoginForm.email" placeholder="请输入邮箱号" class="loginInp"></el-input>
            </el-form-item>

            <!-- 验证码 -->
            <el-form-item prop="code">
              <el-row type="flex" justify="space-between">
                <!-- 验证码输入框 -->
                <el-col :span="16">
                  <el-input v-model="emailLoginForm.code" placeholder="请输入验证码" class="loginInp"></el-input>
                </el-col>
                <!-- 发送验证码按钮 -->
                <el-button
                  style="color:#777"
                  @click="sendEmailCode"
                  :disabled="isSendEmail"
                >{{isSendEmail?emailCodeTime+'s后重新发送':'发送验证码'}}</el-button>
              </el-row>
            </el-form-item>
            <el-form-item></el-form-item>
          </el-form>

          <!-- 登陆重置按钮 -->
          <div class="center formBtns">
            <!-- 登陆按钮 -->
            <el-button
              style="color:#eee;background:-webkit-linear-gradient(left top, #1c53ff, #4898f7)"
              @click="login"
            >登陆</el-button>
            <!-- 重制按钮 -->
            <el-button
              style="color:#eee;background:-webkit-linear-gradient(left top, #666, #bbb)"
              type="info"
              @click="resetloginForm"
            >重置</el-button>
          </div>

          <!-- 其他登陆方式 -->
          <div class="center">
            <!-- 用户名登陆 -->
            <el-link :underline="false" style="color:#777" @click="nameLoginBtn">用户名登陆</el-link>
            <!-- 手机登陆 -->
            <el-link
              :underline="false"
              style="margin-left:10px;color:#777"
              @click="phoneLoginBtn"
            >手机登陆</el-link>
            <!-- 邮箱登陆 -->
            <el-link
              :underline="false"
              style="margin-left:10px;color:#777"
              @click="emailLoginBtn"
            >邮箱登陆</el-link>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    //验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      const regEmail =
        /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;

      if (regEmail.test(value)) {
        //通过
        return cb();
      }

      //失败
      cb(new Error("请输入正确的邮箱"));
    };
    //验证手机号
    var checkMobile = (rule, value, cb) => {
      const regMobile =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (regMobile.test(value)) {
        //通过
        return cb();
      }

      //失败
      cb(new Error("请输入正确的手机号"));
    };
    return {
      //登陆账号密码验证码
      nameLoginForm: {
        name: "",
        password: "",
      },
      //登陆手机号，验证码
      phoneLoginForm: {
        phone: "",
        code: "",
      },
      //登陆邮箱号，验证码
      emailLoginForm: {
        email: "",
        code: "",
      },
      //登陆方式，控制输入框的切换
      isTypeShow: "name",
      //是否发送了手机验证码
      isSendPhone: false,
      //是否发送了邮箱验证码
      isSendEmail: false,
      //手机验证码秒数
      phoneCodeTime: 60,
      //邮箱验证码秒数
      emailCodeTime: 60,
      //账号密码登陆正则验证
      nameLoginFormRules: {
        name: [
          { required: true, message: "账号不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      //手机验证码登陆正则验证
      phoneLoginFormRules: {
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },
      //邮箱验证码登陆正则验证
      emailLoginFormRules: {
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //表单重置
    resetloginForm() {
      switch (this.isTypeShow) {
        case "name":
          this.$refs.resetNameLoginForm.resetFields();
          break;
        case "phone":
          this.$refs.resetPhoneLoginForm.resetFields();
          break;
        case "email":
          this.$refs.resetEmailLoginForm.resetFields();
          break;
      }
    },
    //登陆
    login() {
      switch (this.isTypeShow) {
        case "name":
          this.nameLogin();
          break;
        case "phone":
          this.phoneLogin();
          break;
        case "email":
          this.emailLogin();
          break;
      }
    },
    //用户名登陆按钮
    nameLoginBtn() {
      this.resetloginForm();
      this.isTypeShow = "name";
    },
    //用户名登陆
    nameLogin() {
      //表单预验证
      this.$refs.resetNameLoginForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$axios.get("/vip/admin/accountLogin", {
          params: this.nameLoginForm,
        });
        if (res.code != 0) return this.$message.error("登陆失败");
        this.$message.success("登陆成功");
        console.log(res);
        //登陆成功的token保存在sessionStorage中
        window.sessionStorage.setItem("token", res.data.token);
        window.sessionStorage.setItem("name", res.data.name);
        window.sessionStorage.setItem("phone", res.data.phone);
        window.sessionStorage.setItem("manage", res.data.manage);
        //成功后跳转页面
        this.$router.push("/home");
      });
    },
    //手机登陆按钮
    phoneLoginBtn() {
      this.resetloginForm();
      this.isTypeShow = "phone";
    },
    //发送手机验证码
    sendPhoneCode() {
      //表单预验证
      this.$refs.resetPhoneLoginForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$axios.get("/vip/admin/sendSms", {
          params: { phone: this.phoneLoginForm.phone },
        });
        if (res.code != 0) return this.$message.error("验证码发送失败!");
        this.$message.success("验证码发送成功!");
        this.isSendPhone = true;
        //设置发送按钮60s不能点击
        let sendCodeTime = setInterval(() => {
          this.phoneCodeTime--;
        }, 1000);
        setTimeout(() => {
          clearInterval(sendCodeTime);
          this.isSendPhone = false;
          this.phoneCodeTime = 60;
        }, 60000);
      });
    },
    //手机登陆
    async phoneLogin() {
      //表单预验证
      this.$refs.resetPhoneLoginForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$axios.get("/vip/admin/login", {
          params: this.phoneLoginForm,
        });

        if (res.code != 0) return this.$message.error("登陆失败");
        this.$message.success("登陆成功");
        //登陆成功的token保存在sessionStorage中
        window.sessionStorage.setItem("token", res.data.token);
        window.sessionStorage.setItem("name", res.data.name);
        window.sessionStorage.setItem("phone", res.data.phone);
        window.sessionStorage.setItem("manage", res.data.manage);
        //成功后跳转页面
        this.$router.push("/home");
      });
    },
    //邮箱登陆按钮
    emailLoginBtn() {
      this.resetloginForm();
      this.isTypeShow = "email";
    },
    //发送手机验证码
    sendEmailCode() {
      //表单预验证
      this.$refs.resetEmailLoginForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$axios.get("/vip/admin/sendSms", {
          params: { email: this.emailLoginForm.email },
        });
        console.log(res);
        if (res.code != 0) return this.$message.error("验证码发送失败!");
        this.$message.success("验证码发送成功!");
        this.isSendEmail = true;
        //设置发送按钮60s不能点击
        let sendCodeTime = setInterval(() => {
          this.emailCodeTime--;
        }, 1000);
        setTimeout(() => {
          clearInterval(sendCodeTime);
          this.isSendEmail = false;
          this.emailCodeTime = 60;
        }, 60000);
      });
    },
    //邮箱登陆
    async emailLogin() {
      //表单预验证
      this.$refs.resetEmailLoginForm.validate(async (valid) => {
        const { data: res } = await this.$axios.get("/vip/admin/login", {
          params: this.emailLoginForm,
        });

        if (res.code != 0) return this.$message.error("登陆失败");
        this.$message.success("登陆成功");
        //登陆成功的token保存在sessionStorage中
        window.sessionStorage.setItem("token", res.data.token);
        window.sessionStorage.setItem("name", res.data.name);
        window.sessionStorage.setItem("phone", res.data.phone);
        window.sessionStorage.setItem("manage", res.data.manage);
        //成功后跳转页面
        this.$router.push("/home");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_centainer {
  background: url("../assets/loginBackground.jpeg");
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .login_box {
    width: 800px;
    height: 400px;
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    border-radius: 20px;
    overflow: hidden;
  }
}

.login_form {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.center {
  display: flex;
  justify-content: center;
}
.mainP {
  margin-top: 40px;
  font-size: 23px;
  margin-bottom: 30px;
  color: #4898f7;
}
.loginImg {
  width: 100%;
  height: 100%;
}
.formBtns {
  margin-bottom: 30px;
}

p {
  color: #777;
}
</style>